<template>
  <div class="yiban-app">
    <van-notify v-model="showW" type="warning">
      <van-icon name="bell" style="margin-right: 4px;"/>
      <span>{{ errorText }}</span>
    </van-notify>
    <van-notify v-model="showS" type="success">
      <van-icon name="smile-o" style="margin-right: 4px;"/>
      <span>能够登陆</span>
    </van-notify>

    <AlNavBar @onClickLeft="back" title="yiban打卡"/>

    <div class="content">
      <!-- 开关 -->
      <van-cell>
        <i class="iconfont" :class="icon"> 自动打卡 </i>
        <van-tag type="success" v-show="running">running</van-tag>
        <template #right-icon>
          <van-switch v-model="yibanInfo.open" @click="clickEvent" size="24"/>
        </template>
      </van-cell>

      <!-- 表单 -->
      <van-form @submit="enableLogin">
        <van-field
            v-model="yibanInfo.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :disabled="yibanInfo.open"
        />
        <van-field
            v-model="yibanInfo.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :disabled="yibanInfo.open"
        />
        <div class="testLogin">
          <van-button round type="submit" :disabled="yibanInfo.open">
            测试登录
          </van-button>
        </div>
      </van-form>
    </div>

  </div>


</template>

<script>

import AlNavBar from "@/components/AlNavBar";
import {closeCheckin, save, enableLogin, getData} from '@/api/app/yiban'
import {mapState} from 'vuex'

export default {
  name: "YiBanApp",
  components: {AlNavBar},
  data() {
    return {
      yibanInfo: {
        userId: null,
        username: null,
        password: null,
        open: false
      },
      running: false,
      showW: false,
      showS: false,
      errorText: "可能出了点问题",
    }
  },
  created() {

    getData(this.userInfo.id).then(res => {
      console.log(res)
      this.yibanInfo = res.data.yibanInfo;
      if (this.yibanInfo.open) this.running = true
    })
  },
  methods: {
    back() {
      if (this.$route.query.redirect) {
        this.$router.push('/find')
      } else {
        // 正常跳转的
        this.$router.push('/space')
      }
    },
    enableLogin() {
      console.log("enableLogin")
      enableLogin(this.yibanInfo).then(res => {
        console.log(res)
        if (res.code !== 10000) {
          this.errNotify();
        } else {
          this.successNotify();
        }
      })
    },
    errNotify() {
      this.showW = true;
      setTimeout(() => {
        this.showW = false;
      }, 2000);
    },
    successNotify() {
      this.showS = true;
      setTimeout(() => {
        this.showS = false;
      }, 2000);
    },
    clickEvent() {

      if (this.yibanInfo.open) { // 如果之前是true
        // 现在是关闭状态，发起关闭打卡
        closeCheckin(this.yibanInfo).then(res => {
          // 如果关闭失败，则让开关继续为开状态
          if (res.code !== 10000) {
            if (res.code === 10002) {
              this.errorText = "用户不存在"
            } else {
              this.errorText = "登录失败"
            }
            this.errNotify();
          }
          this.running = false;
        })
      } else { // 如果之前是false
        // 现在是开启状态，发起开启打卡
        save(this.yibanInfo).then(res => {
          // 如果开启失败，则让开关继续为关闭状态
          if (res.code !== 10000) {
            if (res.code === 40003) {
              this.errorText = "登录失败"
            }
            if (res.code === 10002) {
              this.errorText = "用户名为空"
            }
            if (res.code === 99999) {
              this.errorText = "可能出了点问题";
            }
            this.errNotify();
            this.yibanInfo.open = false;
          } else {
            this.running = true;
          }
        })
      }
    }
  },
  computed: {
    ...mapState(['userInfo']),
    open() {
      return this.yibanInfo.open;
    },
    icon() {
      if (this.running) {
        return 'icon-lamp-open'
      }
      return 'icon-lamp-close';
    }
  }


}
</script>

<style lang="less">

.yiban-app {

  .content {
    padding: 0 5px 0 5px;
    margin-top: 20px;

    .van-cell {
      border-radius: 15px;
    }

    .van-form {
      margin-top: 10px;
    }

    .testLogin {
      margin-top: 15px;
    }
  }

  .switch-title {
    font-size: 15px;
    padding-left: 50px;
  }
}

</style>